<!DOCTYPE html >
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="400"
         style="border:1px solid red;">  </canvas>
        <canvas id="my" width="400" height="400" 
        style="border:1px solid red;"></canvas>
        <canvas id="cc" width="400" height="400"
        style="border:1px solid red;">
         </canvas>

            <script>
                var c=document.getElementById("myCanvas");
                var ctx=c.getContext("2d");
                ctx.fillStyle="yellow";
                ctx.strokeStyle="blue";
                ctx.lineWidth=1;
                ctx.fillRect(51,51,48,48);
                ctx.strokeRect(60,50,60,50);
                ctx.stroke()
;
                var d=document.getElementById("my");
                var bbt=d.getContext("2d");
                bbt.fillStyle="yellow";
                bbt.fillRect(0,0,200,100);
                
                var a=document.getElementById("cc");
                var cxt=a.getContext("2d");
                cxt.beginPath();
                ctx.strokeStyle="blue";
                cxt.fillStyle="yellow";
                ctx.stroke(70,18,15,0,Math.PI*2);
                ctx.fillPrototype(70,18,15,0,Math.PI*2);
                cxt.closePath();
                cxt.fill();

            </script>
            
    </body>
</html>